import { Form, Icon, Input, Button, Spin } from 'antd'
import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import { loginStatus } from '../../actions/user'
import { connect } from 'react-redux'
const mapState = state => {
  return {
    spinning: state.user.isLoading,
    hasLogin: state.user.hasLogin
  }
}
@connect(
  mapState,
  { loginStatus }
)
@Form.create()
export default class Login extends Component {
  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.loginStatus()
        console.log('Received values of form: ', values)
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form
    console.log(this.props.hasLogin)
    return this.props.hasLogin ? (
      <Redirect to="admin/dashboard" />
    ) : (
      <Spin spinning={this.props.spinning}>
        <Form onSubmit={this.handleSubmit} className="login-form">
          <Form.Item>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: '请输入正确的用户名' }]
            })(
              <Input
                prefix={
                  <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                placeholder="输入用户名"
              />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '密码错误' }]
            })(
              <Input
                prefix={
                  <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                }
                type="password"
                placeholder="输入密码"
              />
            )}
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Spin>
    )
  }
}
